<script lang="ts" setup>
import { requestLastWeekSongList } from "../../../utils/axiosURL"
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import userChartShowState from "../../../store/chartExample";
import useSongURLStore from "../../../store/songURL";

const songURLStore = useSongURLStore()
const { userID } = storeToRefs(userChartShowState())
const route = useRoute()
// 获取用户id
const defaultUserID = ref<any>(route.query.id)
// 存储所有排行榜数据
let allWeekData = reactive<any>([])
// 有无权限
let noAuthority = ref<number>(0)
// 用户无数据
let userNoData = ref<boolean>(false)

const requestLastWeekSongListFn = () => {
  requestLastWeekSongList(defaultUserID.value ?? userID.value, 0).then((data: any) => {
    if (!data.allData.length) return userNoData.value = true
    allWeekData.values = data.allData
    songURLStore.initPlayList(data.allData.map((item: any) => item = { ...item, ...item.song }))
    localStorage.setItem("playList", JSON.stringify(data.allData.map((item: any) => item = { ...item, ...item.song })))
  }).catch(_ => { noAuthority.value = -2 })
}

onMounted(() => {
  requestLastWeekSongListFn()
})
</script>

<template>
  <div v-if="userNoData" class="noAuthrity">用户暂无排行记录</div>
  <div v-else-if="noAuthority === -2" class="noAuthrity">用户关闭访问权限</div>
  <listenHistoryItem v-else-if="allWeekData.values.length !== 0" :songData="allWeekData.values" />
  <el-skeleton v-else :rows="15" />
</template>

<style lang="scss" scoped>
.noAuthrity {
  width: 100%;
  text-align: center;
  margin-top: 30px;
  font-family: $activeTextFont;
  font-size: $font-size-lg2;
}
</style>
